<template>
    <view class="mask" :class="!show?'':'mask-show'" :style="{backgroundColor:show?maskBg:'rgba(0,0,0,0)'}"
          @tap="tapMask">
        <view class="popups" :class="[theme]" :style="{top: popupsTop ,left: popupsLeft,flexDirection:direction}">
            <text :class="dynPlace" :style="{width:'0px',height:'0px'}" v-if="triangle"></text>
            <view v-for="(item,index) in popData" :key="index" @tap.stop="tapItem(item,index)"
                  v-if="item.show !== false"
                  :class="[direction=='row'?'solid-right':'solid-bottom',item.disabled?'disabledColor':'',item.status?'flex align-center justify-around ':'']"
                  class="itemChild view">
                <view v-if='item.status' :style="{'background-color': item.bg}" class='cus-cir'></view>
                <view>{{item.title}}</view>
            </view>
            <slot></slot>
        </view>
    </view>
</template>

<script>
    export default {
        props: {
            maskBg: {
                type: String,
                default: 'rgba(0,0,0,0)'
            },
            placement: { // 三角形放置位置
                type: String,
                default: 'default' //默认 top-start top-end bottom-start bottom-end none
            },
            direction: {
                type: String,
                default: 'column' //column row
            },
            x: {
                type: Number,
                default: 0
            },
            y: {
                type: Number,
                default: 0
            },
            value: {
                type: Boolean,
                default: false
            },
            popData: {
                type: Array,
                default: () => []
            },
            theme: {
                type: String,
                default: 'light' //light dark
            },
            dynamic: {
                type: Boolean,
                default: false
            },
            gap: {
                type: Number,
                default: 20
            },
            triangle: {
                type: Boolean,
                default: true
            }
        },
        data () {
            return {
                popupsTop: '0px',
                popupsLeft: '0px',
                show: false,
                dynPlace: ''
            }
        },
        mounted () {
            this.popupsPosition()
        },
        methods: {
            tapMask () {

                this.$emit('input', !this.value)
            },
            tapItem (item, index) {
                if (item.disabled) return
                this.$emit('tapPopup', item, index)
                this.$emit('input', !this.value)
            },
            getStatusBar () {
                return new Promise((resolve, reject) => {
                    uni.getSystemInfo({
                        success: function (e) {
                            let customBar
                            // #ifdef H5
                            customBar = e.statusBarHeight + e.windowTop;
                            // #endif
                            resolve(customBar)
                        }
                    })
                })
            },
            async popupsPosition () {
                let statusBar = await this.getStatusBar()
                return new Promise((resolve, reject) => {
                    let popupsDom = uni.createSelectorQuery().in(this).select(".popups")
                    popupsDom.fields({
                        size: true
                    }, (data) => {
                        if(!data)return reject();
                        let width = data.width
                        let height = data.height
                        let y = this.dynamic ? this.dynamicGetY(this.y, this.gap) : this.transformRpx(this.y)
                        let x = this.dynamic ? this.dynamicGetX(this.x, this.gap) : this.transformRpx(this.x)
                        // #ifdef H5
                        y = this.dynamic ? (this.y + statusBar) : this.transformRpx(this.y + statusBar)
                        // #endif
                        this.dynPlace = this.placement == 'default' ? this.getPlacement(x, y) : this.placement
                        switch (this.dynPlace) {
                            case 'top-start':
                                this.popupsTop = `${y + 9}px`
                                this.popupsLeft = `${x - 15}px`
                                break;
                            case 'top-end':
                                this.popupsTop = `${y + 9}px`
                                this.popupsLeft = `${x + 15 - width}px`
                                break;
                            case 'bottom-start':
                                this.popupsTop = `${y - 18 - height}px`
                                this.popupsLeft = `${x - 15}px`
                                break;
                            case 'bottom-end':
                                this.popupsTop = `${y - 9 - height}px`
                                this.popupsLeft = `${x + 15 - width}px`
                                break;
                        }
                        resolve()
                    }).exec();
                })
            },
            getPlacement (x, y) {
                let width = uni.getSystemInfoSync().windowWidth
                let height = uni.getSystemInfoSync().windowHeight
                if (x > width / 2 && y > height / 2) {
                    return 'bottom-end'
                } else if (x < width / 2 && y < height / 2) {
                    return 'top-start'
                } else if (x > width / 2 && y < height / 2) {
                    return 'top-end'
                } else if (x < width / 2 && y > height / 2) {
                    return 'bottom-start'
                } else if (x > width / 2) {
                    return 'top-end'
                } else {
                    return 'top-start'
                }
            },
            dynamicGetY (y, gap) {
                let height = uni.getSystemInfoSync().windowHeight
                y = y < gap ? gap : y
                y = height - y < gap ? (height - gap) : y
                return y
            },
            dynamicGetX (x, gap) {
                let width = uni.getSystemInfoSync().windowWidth
                x = x < gap ? gap : x
                x = width - x < gap ? (width - gap) : x
                return x
            },
            transformRpx (params) {
                return params * uni.getSystemInfoSync().screenWidth / 375
            }
        },
        watch: {
            value: {
                immediate: true,
                handler: async function (newVal, oldVal) {
                    if (newVal) await this.popupsPosition()
                    this.show = newVal
                }
            },
            placement: {
                immediate: true,
                handler (newVal, oldVal) {
                    this.dynPlace = newVal
                }
            }
        }
    }
</script>

<style lang="scss" scoped>
    $unit1px: 2*1upx;

    @mixin triangle-create($bg-color:#fff, $text-color:#515a6e, $size:10) {
        $v-size: $size * $unit1px;
        $y-size: (11.25 - $size) / 2.5 * $size;
        background-color: $bg-color;
        color: $text-color;

        .top-start:after {
            content: "";
            position: absolute;
            top: $size * -0.9 * $unit1px;
            left: $y-size * $unit1px;
            border-width: 0 $v-size $v-size;
            border-style: solid;
            border-color: transparent transparent $bg-color;
        }

        .top-end:after {
            content: "";
            position: absolute;
            top: $size * -0.9 * $unit1px;
            right: $y-size * $unit1px;
            border-width: 0 $v-size $v-size;
            border-style: solid;
            border-color: transparent transparent $bg-color;
        }

        .bottom-start:after {
            content: "";
            position: absolute;
            bottom: $size * -0.9 * $unit1px;
            left: $y-size * $unit1px;
            border-width: $v-size $v-size 0;
            border-style: solid;
            border-color: $bg-color transparent transparent;
        }

        .bottom-end:after {
            content: "";
            position: absolute;
            bottom: $size * -0.9 * $unit1px;
            right: $y-size * $unit1px;
            border-width: $v-size $v-size 0;
            border-style: solid;
            border-color: $bg-color transparent transparent;
        }
    }

    .mask {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 9999999;
        transition: background 0.3s ease-in-out;
        visibility: hidden;

        &.mask-show {
            visibility: visible;
        }
    }

    .popups {
        position: absolute;
        width: 104*2upx;
        padding: 0 13*2upx;
        border-radius: 2*2upx;
        display: flex;
        // box-shadow: 0 5*2upx 5*2upx 0 rgba(232, 232, 232, 0.5);


        .image {
            display: inline-block;
            vertical-align: middle;
            width: 40*1upx;
            height: 40*1upx;
            margin-right: 20*1upx;
        }

        .itemChild {
            text-align: center;
            font-size: 13*2upx;
            font-weight: 400;
            color: #313131;
            line-height: 16*2upx;
            padding: 16*2upx 0;
        }
    }


    .blue {
        @include triangle-create(#0075FF, #fff, 6);
    }

    .dark {
        @include triangle-create(#4C4C4C, #fff, 6);
    }

    .light {
        @include triangle-create(#fff, #515a6e, 6);
    }

    .solid-bottom {
        border-bottom: 1*1upx solid #F1F1F1;
    }

    .solid-right {

        border-right: 1*1upx solid #F1F1F1;
    }

    .popups .itemChild:last-child {
        border: none;
    }

    .cus-cir {
        width: 10upx;
        height: 10upx;
        border-radius: 50%;
    }
</style>
